<template>
	<view class="page">
		<view class="content" v-if="userInfo">
			<view class="item d_flex_b">
				<view class="name">头像1</view>
			
				<!-- #ifdef MP-WEIXIN -->
				<button class="btn" open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<view class="icon-box">
						<image v-if="userInfo.avatarUrl" class="avatar" :src="userInfo.avatarUrl" mode=""></image>
						<image v-else class="avatar" src="/static/5.png" mode=""></image>
					</view>
					<u-icon name="arrow-right" size="16" color="#BBBFCC"></u-icon>
				</button>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<view class="icon-box" @click="chooseAva">
					<image v-if="0 &&userInfo.avatarUrl" class="avatar" :src="userInfo.avatarUrl" mode=""></image>
					<image v-else class="avatar" src="/static/5.png" mode=""></image>
					<u-icon name="arrow-right" size="16" color="#BBBFCC"></u-icon>
				</view>
				<!-- #endif -->
				
			</view>
			<view class="item d_flex_b" @click="editNikename">
				<view class="name">昵称</view>
				<view class="icon-box">
					{{userInfo.nickName||''}}
				</view>
				<u-icon name="arrow-right" size="16" color="#BBBFCC"></u-icon>
			</view>
			<view class="item d_flex_b">
				<view class="name">ID</view>
				<view class="icon-box">
					{{userInfo.id||''}}
				</view>
			</view>
			<view class="item d_flex_b">
				<view class="name">用户身份码</view>
				<view class="icon-box">
					{{userInfo.randomCode||''}}
				</view>
				<button
					class="bt-copy"
					@click="copyData"
				>
					复制
				</button>
			</view>
			<!-- <view class="item d_flex_b">
				<view class="name">绑定微信</view>
				<view class="icon-box d_flex a_c">
					<image class="wx" src="/static/wx-icon.png" mode=""></image>
					191*****010
				</view>
			</view> -->
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="pop">
				<view class="item" @click="chooseCamera(1)">拍照</view>
				<!-- <button class="item" open-type="chooseAvatar" @chooseavatar="chooseavatar">使用微信头像</button> -->
				<view class="item"  @click="chooseCamera(2)">从手机相册选择</view>
				<view class="cancel" @click="canclePop">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:'',
			};
		},
		onShow() {
			this.userInfo=uni.getStorageSync('userInfo')||'';
			this.getUserinfo();
		},
		methods:{
			getUserinfo(){
				this.$http.get1('/qh/user/info').then(res=>{
					if(res.code==200){
						this.userInfo=res.data.user;
					}
				})
			},
			editNikename(){
				uni.navigateTo({
					url:`/pages/mine/nikename?nickName=${this.userInfo.nickName}`
				})
			},
			chooseAva(){
				console.log('chooseAva=')
				this.$refs.popup.open();
			},
			canclePop(){
				this.$refs.popup.close();
			},
			chooseCamera(i){
				var source=[];
				if(i==1){
					source=['camera'];
				}else{
					source=['album'];
				}
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: source, //从相册选择
					success: function (res) {
						console.log('res',JSON.stringify(res));
						let tempFilePaths=JSON.stringify(res.tempFilePaths)
						this.updateMsg(tempFilePaths[0]);
					}
				});
			},
			chooseavatar(e){
				this.userInfo.avatarUrl=e.detail.avatarUrl;
				let obj={
					avatarUrl:this.userInfo.avatarUrl
				}
				this.updateMsg(obj);
			},
			updateMsg(obj){
				this.$http.post('/api/user/update',obj,1).then(res=>{
					if(res.code==200){
						uni.showToast({
							title: '操作成功'
						});
					}else{
						uni.showToast({
							title: res.message,
							icon:'none'
						});
					}
				})
			},
			copyData(data='') {
				uni.setClipboardData({
					data: this.userInfo.randomCode||'',
					success: function () {
						// console.log("success");
					},
				});
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #F2F3F8;
}
.page{
	padding: 30rpx 32rpx;
	box-sizing: border-box;
}
.content{
	width: 686rpx;
	background: #FCFDFF;
	box-shadow: 0rpx 0rpx 4rpx 2rpx rgba(42,65,152,0.1);
	border-radius: 20rpx;
	padding: 8rpx 30rpx;
	box-sizing: border-box;
	.item{
		height: 118rpx;
		width: 100%;
		border-bottom: 1rpx solid #E4E5EC;
		&:last-child{
			border-bottom: none;
		}
		.btn{
			height: 100%;
			flex: 1;
			width: 500rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			background-color: rgba(0,0,0,0);
			margin: 0 ;
			padding: 0;
			border:none;
			&::after{
				border: none;
			}
		}
		.name{
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		.icon-box{
			flex: 1;
			width: 300rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: right;
			font-size: 28rpx;
			color: #575A64;
			justify-content: flex-end;
			height: 100%;
			align-items: center;
			display: flex;
			.avatar{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}
			.wx{
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
		.bt-copy{
			height: 60rpx;
			line-height: 60rpx;
			background: #5480f8;
			font-size: 26rpx;
			padding: 0rpx 20rpx;
			margin-left: 20rpx;
		}
	}
}
.pop{
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	.item{
		width: 100%;
		height: 124rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #575A64;
		border-bottom: 1rpx solid #F2F3F8;
	}
	.cancel{
		height: 174rpx;
		text-align: center;
		padding-bottom: 40rpx;
		line-height: 120rpx;
		border-top: 10rpx solid #F2F3F8;
		color: #333333;
		font-size: 32rpx;
	}
}
</style>
